<template>
  <div>
    <page-main>
      <el-form :model="search" inline>
        <el-form-item label="工单编号">
          <el-input v-model="search.order_no" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工单标题">
          <el-input v-model="search.report_title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="search.create_time" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDateList()" size="mini">搜索</el-button>
          <el-button type="warning" @click="reset" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" height="50vh" v-loading="loading">
        <el-table-column prop="order_no" label="工单编号"></el-table-column>
        <el-table-column prop="report_title" label="工单标题"></el-table-column>
        <el-table-column prop="yj_unit_name" label="社会单位"></el-table-column>
        <el-table-column prop="wb_unit_name" label="维保单位"></el-table-column>
        <!-- <el-table-column prop="report_user_id " label="上报人"></el-table-column> -->
        <el-table-column prop="report_remark" label="上报描述"></el-table-column>
        <el-table-column prop="report_images" label="上报图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="upDataUrl + scope.row.report_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.report_images]"
            ></el-image> </template
        ></el-table-column>
        <el-table-column prop="report_videos" label="上报视频">
          <template #default="scope">
            <video
              v-if="
                Object.prototype.toString.call(scope.row.report_videos) == '[object Array]' &&
                scope.row.report_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.report_videos[0]" type="video/ogg" />
              <source :src="scope.row.report_videos[0]" type="video/mp4" />
              <source :src="scope.row.report_videos[0]" type="video/webm" />
              <object :data="scope.row.report_videos[0]" width="320" height="240"></object>
            </video>
            <img v-else src="@/assets/images/errorVideo.png" style="width: 60px; height: 60px; margin-right: 20px" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="exec_user_id" label="最新操作人"></el-table-column> -->
        <el-table-column prop="report_remark" label="操作描述"></el-table-column>
        <el-table-column prop="result_images" label="最新操作图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="upDataUrl + scope.row.result_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.result_images]"
            ></el-image> </template
        ></el-table-column>
        <el-table-column prop="result_videos" label="最新操作视频">
          <template #default="scope">
            <video
              v-if="
                Object.prototype.toString.call(scope.row.result_videos) == '[object Array]' &&
                scope.row.result_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.result_videos[0]" type="video/ogg" />
              <source :src="scope.row.result_videos[0]" type="video/mp4" />
              <source :src="scope.row.result_videos[0]" type="video/webm" />
              <object :data="scope.row.result_videos[0]" width="320" height="240"></object>
            </video>
            <img v-else src="@/assets/images/errorVideo.png" style="width: 60px; height: 60px; margin-right: 20px" />
          </template>
        </el-table-column>
        <el-table-column label="工单进度" prop="schedule" :formatter="scheduleFormatter"></el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="scope">
            <div>{{ $getDateTime(scope.row.create_time) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="getDateList"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          :page-count="tableDataInfo.last_page"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataInfo: {},
      search: {},
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      loading: false
    }
  },
  created() {
    this.getDateList()
  },
  methods: {
    scheduleFormatter(row, column, cellValue, index) {
      let temp = {
        1: '待处理',
        4: '待验收',
        5: '已完成',
        9: '不需要处理'
      }
      return temp[cellValue]
    },
    reset() {
      this.search = {}
      this.getDateList(1)
    },
    getDateList(page) {
      let unit_id = localStorage.getItem('fa_user_info')
      this.loading = true
      let pageNum = 1
      if (page) pageNum = page

      this.$api
        .post('/unit/Dashboard/dangerList', {
          type: 'workOrder_total',
          page: pageNum,
          rows: 10,
          unit_id: JSON.parse(unit_id).unit_id,
          ...this.search
        })
        .then((res) => {
          this.tableData = res.data.list
          delete res.data.data
          this.tableDataInfo = res.data
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
